<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
<link href="${ctx.resource}/css/credit-mall.css" rel="stylesheet">
<title>商品列表</title>
</head>
<body>
  <div class="page-group">
    <div class="page page-current" style="background: #f5f5f5;">
      <div class="content-block" style="margin: .75rem 0;">
        <div class="buttons-row product-list">
          <a href="${ctx.host}/credit-mall/products?tag=HOT" class="<c:if test="${tag.alias == 'hot' }">active</c:if> button">热门兑换</a> <a href="${ctx.host}/credit-mall/products?tag=LIMITEDTIME" class="<c:if test="${tag.alias == 'limitedTime' }">active</c:if> button">限时兑换</a> <a href="${ctx.host}/credit-mall/products?tag=CREDITPRESENT" class="<c:if test="${tag.alias == 'creditPresent' }">active</c:if> button">积分好礼</a>
        </div>
      </div>

      <div class="mall-list product-list-wrap">
        <div class="list-block media-list" id="scroller-box" style="position: absolute; top: 3rem; overflow: hidden; right: 0; left: 0; bottom: 0;">
          <ul class="scroller" id="scroller">
            <c:if test="${creditProductsSize > 0}">
              <c:forEach items="${creditProducts }" var="cp">
              <li>
                <a href="${ctx.host}/credit-mall/products/${cp.id}" class="item-content">
                  <div class="item-media">
                    <img src="${cloud.prod}/${cp.cover}-0.6" class="product-cover">
                  </div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">${cp.name }</div>
                    </div>
                    <div class="item-subtitle">
                      <span>${cp.currentPrice}</span>积分
                    </div>
                  </div>
                  <div class="item-after">
                    <button class="button exchange-button">兑换</button>
                  </div>
                </a>
              </li>
              </c:forEach>
            </c:if>
            <c:if test="${creditProductsSize <= 0 }">
              <li style="text-align: center; background: #f5f5f5; padding: .5rem 0;">暂无数据</li>
            </c:if>
          </ul>
          <div class="no-more hide">
            <span>你已经很努力了</span>
          </div>
        </div>
      </div>
      
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/credit/mall/credit-mall-list.js" />
  <script type="text/javascript">
    require(['page/credit/mall/credit-mall-list'], function(page) {
      page.init()
    })
  </script>
  
</body>
</html>